<template>
  <view class="content">
    <view class="app-title ac">
      <view class="fl" @click="back"
        ><image class="back" src="/static/img/back.png"></image></view
      >创建故障单
    </view>

    <view class="top-bg"></view>

    <view class="detail">
      <u-cell-group>
        <u-cell-item
          title="接报时间:"
          :value="data_list.jcDate == '' ? '请选择' : data_list.jcDate"
          @click="
            params = {
              year: true,
              month: true,
              day: true,
              hour: true,
              minute: true,
            };
            show_date = true;
            date_type = true;
          "
        ></u-cell-item>
        <u-cell-item
          title="故障开始时间:"
          :value="data_list.jcDate == '' ? '请选择' : data_list.jcDate"
          @click="
            params = {
              year: true,
              month: true,
              day: true,
              hour: true,
              minute: true,
            };
            show_date = true;
            date_type = true;
          "
        ></u-cell-item>
        <u-radio-group
          v-model="data_list.isExam"
          style="height: 50px; width: 100%"
          placement="row"
        >
          <text
            style="display: inline-block; line-height: 50px; margin-right: 20%"
            >故障位置:</text
          >
          <u-radio :name="'车站'" :disabled="false">车站</u-radio>
          <u-radio :name="'区间'" :disabled="false">区间</u-radio>
          <u-radio :name="'列车'" :disabled="false">列车</u-radio>
        </u-radio-group>
        <u-cell-item
          title="线路:"
          :value="data_list.wtSource == '' ? '请选择' : data_list.wtSource"
          @click="
            show_picker = true;
            columns = src_options;
          "
        ></u-cell-item>
        <u-cell-item
          title="故障地点:"
          :value="data_list.wtSource == '' ? '请选择' : data_list.wtSource"
          @click="
            show_picker = true;
            columns = src_options;
          "
        ></u-cell-item>
        <u-cell-item
          title="填写人:"
          :value="data_list.wtSource == '' ? '请填写' : data_list.wtSource"
        ></u-cell-item>
        <!-- @click="
            show_picker = true;
            columns = src_options;
          " -->
        <u-cell-item
          title="发现人:"
          :value="data_list.wtSource == '' ? '请填写' : data_list.wtSource"
        ></u-cell-item>

        <u-cell-item
          title="发现人联系电话:"
          :value="data_list.wtSource == '' ? '请填写' : data_list.wtSource"
        ></u-cell-item>
        <u-radio-group v-model="data_list.isExam" class="rad" placement="row">
          <text
            style="display: inline-block; line-height: 50px; margin-right: 30%"
            >是否是本部门问题:</text
          >
          <div class="rig">
            <u-radio :name="1" :disabled="false">是</u-radio>
            <u-radio :name="0" :disabled="false">否</u-radio>
          </div>
        </u-radio-group>
        <view class="job-detail">故障现象：</view>
        <textarea class="text" v-model="data_list.wtContent"></textarea>
        <view class="job-detail">备注及其它：</view>
        <textarea class="text" v-model="data_list.wtContent"></textarea>

        <!-- <u-cell-item title="检查部门:" :value="orgname" :arrow="false"></u-cell-item>
				<u-cell-item title="检  查 人:" :value="username" :arrow="false"></u-cell-item>
				<u-cell-item title="问题来源:" :value="data_list.wtSource == '' ? '请选择' : data_list.wtSource" @click="show_picker = true;columns=src_options"></u-cell-item>
				<u-cell-item title="问题等级:" :value="data_list.wtLevel == '' ? '请选择' : data_list.wtLevel" @click="show_picker = true;columns=level_options"></u-cell-item>
				<u-cell-item title="等级详情:" :value="data_list.levelDetail == '' ? '请选择' : data_list.levelDetail" @click="show_picker = true;columns=detail_options"></u-cell-item>
				<u-cell-item title="问题类别:" :value="data_list.wtCategory == '' ? '请选择' : data_list.wtCategory" @click="show_picker = true;columns=type_options"></u-cell-item>
				<u-cell-item title="站 /区间:" :value="data_list.belongStation == '' ? '请选择' : station_name" @click="show_picker = true;columns=station_options"></u-cell-item>
				<u-cell-item title="责任部门:" :value="org == '' ? '请选择' : org" @click="show_picker=true;columns=org_options"></u-cell-item>
				<u-cell-item title="责  任 人:" :value="person == '' ? '请选择' : person" @click="show_picker=true;columns=person_options"></u-cell-item>
				<u-cell-item title="设备类型:" :value="eqt == '' ? '请选择' : eqt" @click="show_device=true"></u-cell-item>
				<u-cell-item title="设备:" :value="device == '' ? '请选择' : device" @click="show_picker=true;columns=deviceChild_options"></u-cell-item>
				 <u-cell-item title="设备类型:" :value="eqt == '' ? '请选择' : eqt" @click="show_picker=true;columns=device_options"></u-cell-item> -->
      </u-cell-group>
      <!-- <u-radio-group
        v-model="data_list.isExam"
        style="height: 50px; width: 100%"
        placement="row"
      >
        <text
          style="display: inline-block; line-height: 50px; margin-right: 45%"
          >纳入考核:</text
        >
        <u-radio :name="1" :disabled="false">是</u-radio>
        <u-radio :name="0" :disabled="false">否</u-radio>
      </u-radio-group> -->
      <!-- <view class="job-detail">问题内容：</view>
      <textarea class="text" v-model="data_list.wtContent"></textarea>
      <u-cell-group>
        <u-cell-item
          title="更改期限:"
          :value="data_list.zgDate == '' ? '请选择' : data_list.zgDate"
          @click="
            params = { year: true, month: true, day: true };
            show_date = true;
            date_type = false;
          "
        ></u-cell-item>
      </u-cell-group>
      <view class="job-detail">整改要求：</view>
      <textarea class="text" v-model="data_list.zgRequest"></textarea>
      <view class="job-detail">拍照上传：</view> -->
      <!-- <view class="photo"> -->
      <!-- <u-upload :action="action" @on-success="backImg"></u-upload> -->
      <!-- <view class=" img-item" v-for="(img,i) in img_list" :key="i"><image class="images" :src="img"></image></view> -->
      <!-- </view> -->

      <view class="btn">
        <!-- style="width: 30.5%; margin-right: 1%" -->
        <button class="cancel-btn fl" @click="back">取消</button>
        <!-- style="width: 30.5%" -->
        <button
          class="default-btn"
          @click="pushData('/cascoAppWentiController/addWenti')"
        >
          保存
        </button>
        <!-- style="width: 30.5%" -->
        <button
          class="default-btn fr"
          @click="pushData('/cascoAppWentiController/submitWenti')"
        >
          提交
        </button>
      </view>
    </view>

    <view class="full" v-show="show_picker || show_date || show_device"></view>
    <u-picker
      v-model="show_date"
      mode="time"
      :params="params"
      @confirm="setDate"
      @cancel="onCancel"
    ></u-picker>
    <u-select
      v-model="show_picker"
      :list="columns"
      label-name="text"
      @confirm="onConfirm"
      @cancel="onCancel"
    ></u-select>
    <view
      v-show="show_device"
      style="
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #fff;
        font-size: 14px;
        color: #000;
        z-index: 15;
      "
    >
      <view
        @click="show_device = false"
        style="line-height: 60px; font-size: 16px; padding: 0 15px"
        ><b>返回{{ eqt != "" ? "---" + eqt : "" }}</b></view
      >
      <view style="height: 275px; overflow: auto">
        <view v-for="(item, index) in device_options" :key="index">
          <view
            style="
              line-height: 45px;
              padding: 0 15px;
              border-bottom: 1px solid #d7d7d7;
            "
            @click="showChildItem(item, index)"
            ><b>{{ item.text }}</b></view
          >
          <view
            v-for="(child, i) in item.children"
            :key="i"
            v-show="device_child[index]"
            @click="getChildItem(child)"
            style="
              line-height: 35px;
              padding: 0 15px 0 35px;
              border-bottom: 1px solid #d7d7d7;
              font-size: 12px;
            "
            >{{ child.text }}</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: uni.getStorageSync("username"),
      orgname: "",
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true,
      },
      action: this.baseUrl() + "/home/uploadImageAppTurnoutForm",
      src_options: "",
      type_options: "",
      level_options: "",
      detail_options: "",
      org_options: "",
      person_options: "",
      device_options: "",
      station_options: "",
      deviceChild_options: [],
      columns: [],
      data_list: {
        attachment: "", // 附件 以逗号隔开的文件路径
        belongStation: "", //站或区间
        bpmStatus: "", //流程状态
        createBy: "", //创建者
        eqtId: "", //设备id
        eqtType: "", //设备类型id
        handleDate: "", //处理时间
        handleInformation: "", //处理情况
        handleOrg: "", //处理部门
        handlePerson: "", //处理人
        handlePicture: [], //处理情况图片
        isExam: "0", //纳入考核 0否 1是
        jcDate: "", //检查时间
        jcOrg: uni.getStorageSync("departid"), //检查部门id
        jcPerson: this.getUserId(), //检查人
        levelDetail: "", //等级详情
        verifyDate: "", //验证时间
        verifyEvaluation: "", //验证评价
        verifyOrg: "", //验证部门
        verifyPerson: "", // 验证人
        verifyResult: "", //验证结果
        wtCategory: "", //问题类别
        wtContent: "", //问题内容
        wtLevel: "", //问题等级
        wtSource: "", //问题来源
        wtState: "", //问题状态
        zgDate: "", //整改期限
        zgRequest: "", //整改要求
        zrOrg: "", //责任部门id
        zrPerson: "", //责任人id
      },
      jcOrg: "",
      org: "",
      person: "",
      eqt: "",
      device: "",
      station_name: "",
      img_list: [],
      currentDate: "",
      currentDate2: "",
      minDate: new Date(),
      device_child: [],
      date_type: true,
      show_picker: false,
      show_device: false,
      show_date: false,
    };
  },
  created() {
    this.initOptions();
  },
  methods: {
    back() {
      uni.navigateBack();
    },
    backImg(data, index, lists) {
      this.data_list.handlePicture.push(data.data);
    },
    onConfirm(value, index) {
      if (value[0].extra == "src") {
        this.data_list.wtSource = value[0].label;
      } else if (value[0].extra == "type") {
        this.data_list.wtCategory = value[0].label;
      } else if (value[0].extra == "level") {
        this.data_list.wtLevel = value[0].label;
      } else if (value[0].extra == "detail") {
        this.data_list.levelDetail = value[0].label;
      } else if (value[0].extra.type == "org") {
        this.data_list.zrOrg = value[0].extra.id;
        this.org = value[0].label;
        this.getPerson(value[0].extra.id);
      } else if (value[0].extra.type == "person") {
        this.data_list.zrPerson = value[0].extra.id;
        this.person = value[0].label;
      } else if (value[0].extra == "exam") {
        this.data_list.isExam = value[0].value;
      } else if (value[0].extra == "deviceChild") {
        this.device = value[0].label;
        this.data_list.eqtId = value[0].value;
      } else if (value[0].extra == "station") {
        this.data_list.belongStation = value[0].value;
        this.station_name = value[0].label;
      }
      this.onCancel();
    },
    onCancel() {
      this.show_picker = false;
      this.show_date = false;
    },
    setDate(obj) {
      if (this.date_type) {
        let str =
          obj.year +
          "-" +
          obj.month +
          "-" +
          obj.day +
          " " +
          obj.hour +
          ":" +
          obj.minute +
          ":00";
        this.data_list.jcDate = str;
      } else {
        let str = obj.year + "-" + obj.month + "-" + obj.day;
        this.data_list.zgDate = str;
      }
      this.onCancel();
    },
    showChildItem(item, i) {
      this.device_child.splice(i, 1, !this.device_child[i]);
    },
    getChildItem(item) {
      this.eqt = item.text;
      this.data_list.eqtType = item.id;
      if (this.data_list.zrOrg == "" || this.data_list.belongStation == "")
        return uni.showToast({ title: "必须选择机构和车站", icon: "none" });
      this.fetch("GET", this.baseUrl() + "/eqtTZcController/queryEqtInUse", {
        orgId: this.data_list.zrOrg,
        stationCode: this.data_list.belongStation,
        equTypeId: this.data_list.eqtType,
        page: 0,
      }).then((res) => {
        if (res.returnCode == 1 && res.data != null) {
          this.deviceChild_options = res.data.content;
          this.deviceChild_options.map((item) => {
            item.children = "";
            item.extra = "deviceChild";
            item.text = item.equName;
            item.value = item.id;
          });
        }
      });
      this.show_device = false;
    },
    initOptions() {
      this.fetch(
        "GET",
        this.baseUrl() + "/cascoAppWentiController/queryWentiDic",
        { dicClass: "WET_JC_SRC" }
      ).then((res) => {
        if (res.returnCode == 1) {
          this.src_options = res.data;
          this.src_options.map((item) => {
            item.text = item.DICNAME;
            item.extra = "src";
          });
        }
      });
      this.fetch(
        "GET",
        this.baseUrl() + "/cascoAppWentiController/queryWentiDic",
        { dicClass: "WET_TYPE" }
      ).then((res) => {
        if (res.returnCode == 1) {
          this.type_options = res.data;
          this.type_options.map((item) => {
            item.text = item.DICNAME;
            item.extra = "type";
          });
        }
      });
      this.fetch(
        "GET",
        this.baseUrl() + "/cascoAppWentiController/queryWentiDic",
        { dicClass: "WET_LEVEL" }
      ).then((res) => {
        if (res.returnCode == 1) {
          this.level_options = res.data;
          this.level_options.map((item) => {
            item.text = item.DICNAME;
            item.extra = "level";
          });
        }
      });
      this.fetch(
        "GET",
        this.baseUrl() + "/cascoAppWentiController/queryWentiDic",
        { dicClass: "LEVEL_DETAIL" }
      ).then((res) => {
        if (res.returnCode == 1) {
          this.detail_options = res.data;
          this.detail_options.map((item) => {
            item.text = item.DICNAME;
            item.extra = "detail";
          });
        }
      });
      this.fetch("GET", this.baseUrl() + "/home/getOrgTreeByPerson", {
        personId: this.getUserId(),
      }).then((res) => {
        if (res.returnCode == 1) {
          this.org_options = res.data;
          this.org_options.map((item) => {
            item.children = "";
            item.extra = { type: "org", id: item.id };
            if (item.id == uni.getStorageSync("departid"))
              this.orgname = item.text;
          });
        }
      });
      this.fetch("GET", this.baseUrl() + "/home/queryEqtTypeTree2", {}).then(
        (res) => {
          if (res.returnCode == 1) {
            this.device_options = res.data;
            this.device_options.map((item) => {
              item.extra = "device";
              item.value = item.id;
            });
            this.device_child = new Array(this.device_options.length).fill(
              false
            );
          }
        }
      );
      this.fetch("GET", this.baseUrl() + "/home/getStations", {
        orgid: uni.getStorageSync("departid"),
      }).then((res) => {
        if (res.returnCode == 1) {
          this.station_options = res.data;
          this.station_options.map((item) => {
            item.text = item.NAME;
            item.extra = "station";
            item.value = item.CODE;
          });
        }
      });
    },
    getPerson(id) {
      this.fetch("GET", this.baseUrl() + "/home/getUserListByOrgId", {
        departid: id,
      }).then((res) => {
        if (res.returnCode == 1) {
          this.person_options = res.data;
          this.person_options.map((item) => {
            item.extra = { type: "person", id: item.id };
            item.text = item.username;
          });
        }
      });
    },
    pushData(url) {
      if (this.data_list.jcDate == "")
        return uni.showToast({ title: "请选择检查时间", icon: "none" });
      if (this.data_list.wtSource == "")
        return uni.showToast({ title: "请选择问题来源", icon: "none" });
      if (this.data_list.wtLevel == "")
        return uni.showToast({ title: "请选择问题等级", icon: "none" });
      if (this.data_list.levelDetail == "")
        return uni.showToast({ title: "请选择等级详情", icon: "none" });
      if (this.data_list.wtCategory == "")
        return uni.showToast({ title: "请选择问题类别", icon: "none" });
      if (this.data_list.zrOrg == "")
        return uni.showToast({ title: "请选择责任部门", icon: "none" });
      if (this.data_list.handlePicture.length > 0) {
        this.data_list.handlePicture = this.data_list.handlePicture.join(",");
      } else {
        this.data_list.handlePicture = this.data_list.handlePicture.toString();
      }
      this.fetch("POST", this.baseUrl() + url, this.data_list, true).then(
        (res) => {
          if (res.returnCode == 1) {
            uni.showToast({ title: "操作完成", icon: "none" });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/question/index",
              });
            }, 1500);
          } else {
            uni.showToast({ title: res.message, icon: "none" });
          }
        }
      );
    },
  },
};
</script>

<style scoped>
.rad {
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.rig {
  height: 50px;
  line-height: 50px;
}
.rig > .u-radio__label {
  font-size: 8px;
}
.detail {
  height: auto;
  padding-bottom: 16px;
  margin-top: -170px;
}
.job-detail {
  line-height: 45px;
}
.detail > .text {
  background: #f9fbfe;
  border: 1px solid #f1f1f1;
  border-radius: 6px;
  padding: 10px;
  font-size: 14px;
  height: 104px;
  overflow: auto;
}
.detail > .photo {
  overflow-x: auto;
  width: 100%;
  height: 100px;
  white-space: nowrap;
}
.detail > .photo > .img-item {
  width: 80px;
  height: 80px;
  margin-right: 10px;
  border-radius: 6px;
  display: inline-block;
  vertical-align: middle;
}
.detail > .btn {
  margin: 10px 0 0 0;
  display: flex;
  justify-content: space-around;
}
.detail > .btn > button {
  width: 30%;
  display: inline-block;
}
.photo .images {
  width: 80px;
  height: 80px;
}

.van-cell {
  padding: 13px 16px;
}
.van-hairline--top-bottom::after,
.van-hairline-unset--top-bottom::after {
  border-top: 0px;
}
.van-cell__value {
  color: #3e3a39;
}
</style>
